<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
    <title>注册</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none !important;
        }
        body{
            background-color: #f8f8f8;
        }
        p{
            margin: 0;
        }
        .top{
            height: 30px;
            line-height: 30px;
            border-bottom: 1px solid #e8e8e8;
            background: #f1f1f1;
            font-size: 12px;
        }
        .top .t_main{
            width: 1200px;
            margin: 0 auto;
            color: #525252;
        }
        .top .t_main ul{
            display: flex;
            margin: 0;
        }
        .top .t_main .t_lt{
            float: left;
        }
        .top .t_main .t_rt{
            float: right;
        }
        .top .t_main ul li{
            position: relative;
            border-left: 1px solid transparent;
            border-right: 1px solid transparent;
            z-index: 9;
        }
        .top .t_main ul li span{
            color: red;
        }
        .top .t_main ul li i{
            color: #a1a0a7;
            margin-left: 3px;
            transition: transform 0.3s;
        }
        .top .t_main a{
            color: #525252;
            padding: 0 12px;
            border-right: 1px solid #ddd;
        }
        .top .t_main a:hover{
            color: red;
        }
        .top .t_main a:hover i{
            transform: rotate(180deg);
        }
        .top .t_main .dropdown{
            display: none;
            position: absolute;
            left: -1px;
            top: 29px;
            background-color: #fff;
            border: 1px solid #e0e0e0;
            text-align: center;
        }
        .top .t_lt .dropdown>div{
            padding: 15px 15px 0 15px;
        }
        .top .t_main li:not(.no):hover{
            background-color: #fff;
            border-left: 1px solid #e0e0e0;
            border-right: 1px solid #e0e0e0;
        }
        .top .t_main li:hover .dropdown{
            display: block;
        }
        .top .t_rt .dropdown .drop_fw{
            width: 200px;
            padding: 10px;
            display: flex;
            flex-wrap: wrap;
        }
        .t_rt .dropdown .drop_fw p{
            width: 90px;
            text-align: left;
        }
        .top .t_rt .dropdown .drop_wz{
            width: 290px;
            padding: 5px 0;
            border-bottom: 1px solid #e0e0e0;
        }
        .t_rt .dropdown .drop_wz p{
            width: 70px;
        }
        .t_rt .dropdown p:hover{
            color: red;
            cursor: pointer;
        }

        .header{
            width: 100%;
            min-width: 1200px;
            padding: 30px 0 20px;
            background: #fff;
        }
        .header .head{
            width: 1200px;
            margin: 0 auto;
            color: #333;
        }
        .header .head .headtel{
            float: right;
            padding: 12px 0 18px 50px;
            line-height: 25px;
            position: relative;
        }
        .header .head .headtel i{
            position: absolute;
            left: 0;
            top: 18px;
            display: inline-block;
            font-size: 24px;
            color: #a9a9a9;
            border-radius: 50%;
            border: 4px solid #a9a9a9;
            padding: 5px;
        }

        .formtop{
            width: 1110px;
            height: 90px;
            margin: 60px auto;
        }
        .formtop .step{
            width: 100%;
            height: 30px;
        }
        .formtop .step span{
            display: inline-block;
            width: 367px;
            font-size: 12px;
            line-height: 30px;
            text-align: center;
        }
        .formtop .lineimg{
            width: 100%;
            height: 20px;
            margin: 20px auto;
            background: url("imgs/rg_line.png") no-repeat;
            background-position: center top;
        }
        
        .form{
            width: 1000px;
            margin: 0 auto;
            background: #fff;
            padding-top: 20px;
        }
        .form .formbox{
            width: 500px;
            margin: 20px auto;
        }
        .form .formbox .yzm{
            font-size: 15px;
            border-color: #e5e6e7;
            background: linear-gradient(#fff 0%,#f1f1f1 100%);
        }
        .form .formbox .yzm:hover{
            background: linear-gradient(#f1f1f1 0%,#fff 100%);
        }
        .form .form-group input{
            width: 300px;
            height: 40px;
            font-size: 12px;
        }
        .form .form-group label{
            float: left;
            width: 90px;
            font-weight: normal;
        }
        .form span{
            color: red;
        }
        .form button{
            margin: 0 10px;
            padding: 11px 15px;
            background-color: #999;
            color: white;
            border: none;
            font-size: 12px;
        }

        .foot{
            width: 100%;
            background: #1b1b1b;
            padding: 30px 0px;
            margin-top: 50px;
            text-align: center;
        }
        .foot .footmain{
            width: 1000px;
            margin: 0 auto;
            color: #575757;
            font-size: 12px;
        }
        .foot .footmain dd{
            line-height: 30px;
        }
        .foot .footmain a{
            color: #575757;
            padding: 0 15px;
        }
        .foot .footmain a:hover{
            color: #9f9f9f;
        }
        .foot .footmain a i{
            display: inline-block;
            width: 18px;
            height: 18px;
            margin-top: -5px;
            vertical-align: middle;
            background: url("imgs/sprite_global.png") no-repeat;
        }
        .foot .footmain .footFriend i{
            display: inline-block;
            width: 88px;
            height: 31px;
            display: inline-block;
            background-image: url("imgs/footFriend.png");
            margin-right: 4px;
            opacity: 0.5;
        }
        .foot .footmain .footFriend i:hover{
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="t_main">
            <ul class="t_lt">
                <li><a href=""><span class="glyphicon glyphicon-phone"></span> 手机站<i class="glyphicon glyphicon-menu-down"></i></a>
                    <div class="dropdown">
                        <div style="border-bottom: 1px solid #e0e0e0;">
                            <img src="./imgs/oneCode.jpg" alt="">
                            <p>手机站</p>
                        </div>
                        <div>
                            <img src="./imgs/xiaochengxu.jpg" alt="">
                            <p>小程序</p>
                        </div>
                    </div>
                </li>
                <li class="no" style="padding: 0 10px;">欢迎来到企汇网</li>
                <li class="no"><a href=""><span class="glyphicon glyphicon-user"></span> 登录</a></li>
                <li class="no"><a href="" style="border: none;">免费注册</a></li>
            </ul>
            <ul class="t_rt">
                <li class="no"><a href="./企汇网首页.html">企汇网首页</a></li>
                <li><a href="">收藏夹<i class="glyphicon glyphicon-menu-down"></i></a>
                    <div class="dropdown">
                        <div style="width: 76px; padding: 0 7px;">
                            <p>收藏的商品</p>
                            <p>收藏的店铺</p>
                        </div>
                    </div>
                </li>
                <li><a href="">我是采购商<i class="glyphicon glyphicon-menu-down"></i></a>
                    <div class="dropdown">
                        <div style="width: 100px; padding: 0 7px;">
                            <p>采购商中心</p>
                            <p>发布采购单</p>
                            <p>采购管理</p>
                        </div>
                    </div>
                </li>
                <li><a href="">我是供应商<i class="glyphicon glyphicon-menu-down"></i></a>
                    <div class="dropdown">
                        <div style="width: 100px; padding: 0 7px;">
                            <p>供应商中心</p>
                            <p>发布产品</p>
                            <p>产品管理</p>
                            <p>店铺管理</p>
                        </div>
                    </div>
                </li>
                <li class="no"><a href="">企汇管家</a></li>
                <li><a href="">企汇服务<i class="glyphicon glyphicon-menu-down"></i></a>
                    <div class="dropdown">
                        <div class="drop_fw">
                            <p style="width: 180px; color: #4d4d4d; font-weight: bold;">热门服务</p>
                            <p>标王</p>
                            <p>黄金展位</p>
                            <p>热门推荐广告位</p>
                            <p>图片空间</p>
                            <p>信息包</p>
                            <p>企汇金铺</p>
                            <p>金铺装修</p>
                            <p>更多服务</p>
                        </div>
                    </div>
                </li>
                <li><a href="">客服中心<i class="glyphicon glyphicon-menu-down"></i></a>
                    <div class="dropdown">
                        <div style="width: 88px; padding: 0 7px;">
                            <p>常见问题</p>
                            <p>在线客服</p>
                        </div>
                    </div>
                </li>
                <li><a href=""><span class="glyphicon glyphicon-th-large"></span>网站导航<i class="glyphicon glyphicon-menu-down"></i></a>
                    <div class="dropdown" style="left: -211px; padding: 10px;">
                        <div class="drop_fw drop_wz">
                            <p style="width: 250px; color: #4d4d4d; font-weight: bold;">热门服务</p>
                            <p>首页</p>
                            <p>企汇管家</p>
                            <p>企汇云信</p>
                            <p>企业库</p>
                            <p>产品库</p>
                            <p>手机站</p>
                            <p>搜索</p>
                            <p>企汇软文通</p>
                            <p>百度爱采购</p>
                            <p>企业直通车</p>
                        </div>
                        <div class="drop_fw drop_wz">
                            <p style="width: 250px; color: #4d4d4d; font-weight: bold;">采购服务</p>
                            <p>采购中心</p>
                            <p>发布采购单</p>
                        </div>
                        <div class="drop_fw drop_wz" style="border: none;">
                            <p style="width: 250px; color: #4d4d4d; font-weight: bold;">行业市场</p>
                            <p>建材频道</p>
                            <p>机械频道</p>
                            <p>农林频道</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="header">
        <div class="head">
            <img src="./imgs/logo.png" alt="">
            <span style="font-size: 21px;margin-left: 25px;">会员注册</span>
            <div class="headtel">
                <i class="glyphicon glyphicon-earphone"></i>
                <p>客服电话</p>
                <p style="font-size: 28px; color: #e02445;">400-6677-369</p>
            </div>
        </div>
    </div>
    <div class="formtop">
        <div class="step">
            <span style="color: red;">验证手机号</span>
            <span>填写账号信息</span>
            <span>注册成功</span>
        </div>
        <div class="lineimg"></div>
    </div>
    <div class="form">
        <form class="form-horizontal">
            <div class="form-group formbox">
                <label for="phone" class="control-label"><span>*</span>请输入手机号</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="phone" placeholder="请输入手机号">
                </div>
            </div>
            <div class="form-group formbox">
                <label for="yzm" class="control-label"><span>*</span>验证码</label>
                <div class="col-sm-9">
                    <input type="button" class="yzm form-control btn-default" id="yzm" value="点击按钮进行验证">
                </div>
            </div>
            <div class="form-group formbox">
                <label for="message" class="control-label"><span>*</span>短信验证码</label>
                <div class="col-sm-4">
                    <input style="width: 150px;" type="text" class="form-control" id="message" placeholder="请输入验证码">
                </div>
                <button>获取短信验证码</button>
            </div>
                <div class="formbox" style="width: 290px; padding-top: 10px; font-size: 12px;">
                    <input style="position: relative; top: 2px;" type="checkbox"> 我已阅读并同意<span>《企汇网服务条款》</span>
                </div>
                <hr>
                <div class="formbox" style="text-align: center; padding-bottom: 20px;">
                    <button style="font-size: 16px; padding: 10px 90px;">下一步</button>
                </div>
        </form>
    </div>
    <div class="foot">
        <dl class="footmain">
            <dd>
                <a href="">网站首页</a>|
                <a href="">关于我们</a>|
                <a href="">联系我们</a>|
                <a href="">使用协议</a>|
                <a href="">版权隐私</a>|
                <a href="">维权通道</a>|
                <a href="">网站导航</a>|
                <a href="">用户反馈</a>
            </dd>
            <dd>
                客服咨询热线：400-6677-369(免长途费) 工作时间：900-18:00(周一至周五)
                <a href="">在线客服：<i></i></a>
                <a href="">关注我们：<i style="background-position: 0 -18px;"></i></a>
            </dd>
            <dd>
                版权所有2009-2021&emsp;河南企汇网信息技术股份有限公司&emsp;保留所有权利&emsp;
                <span style="color: #9f9f9f;">经营许可证编号：</span>
                <a href="">豫B2-20140075</a>
                豫公网安备 41019702002055号
            </dd>
            <dd class="footFriend" style="margin: 15px;">
                <i></i>
                <i style="background-position: -92px 0;"></i>
                <i style="background-position: -182px 0;"></i>
                <i style="background-position: -272px 0; width: 107px;"></i>
                <i style="background-position: -383px 0;"></i>
                <i style="background-position: -474px 0; width: 95px;"></i>
            </dd>
        </dl>
    </div>
</body>
</html>